<template>
  <section class="wrapper">
    <myHeader :obj="myObj" @events="events"></myHeader>
    <main>
      <section class="friendTitle_0313">好友</section>
      <section class="friendUl_0313">
        <myFriendItem :active="this.active" @showicon="showicon(1)" index="1">THEBESTTHEKING</myFriendItem>
        <myFriendItem :active="this.active" @showicon="showicon(2)" index="2">尤雨溪</myFriendItem>
        <myFriendItem :active="this.active" @showicon="showicon(3)" index="3">国服第一CSS</myFriendItem>
      </section>
      <myButton class="btnW_0321" @sendDate="Recommend()">确认推荐</myButton>
    </main>
  </section>
</template>
<script>
import myHeader from './base/myHeader';
import myButton from './base/myButton';
import myFriendItem from './base/myFriendItem';
import Client from '../assets/js/common';
import {Toast } from 'mint-ui';
import hgjSkip from '../assets/js/hgjSkip';
import API from '../assets/js/asktoses';
import { fetch } from '../assets/api';
export default {
  data () {
    return {
      myObj: {
        type: 2,
        text: '我的朋友'
      },
      loginData:"",
      active:"",
      loginData:null,
    }
  },
  created(){
    hgjSkip.skip().then(res =>{
      this.loginData = res;
    })
  },
  methods: {
    events(i){
      if(i == 2) {
        history.back();
      }
    },
    showicon(num) {
      this.active = num;
      
    },
    async Recommend(){
      const res = await fetch(API.Recommendfrirend,{
        ...this.loginData[1],
        AskToSeeId: "",
        ToOpenId:""
      });
      this.datalist = res.Result.Messages;
      window.history.back();
    },
  },
  components: {
    myHeader,
    myButton,
    myFriendItem
  }
}

</script>
<style lang="less">
.wrapper {
  width: 3.75rem;
  height: 100%;
  main {
    padding-top: .44rem;
    height: 100%;
    width: 3.75rem;
    position: absolute;
    top: 0;
    box-sizing: border-box;
    overflow-y: auto;
    .btnW_0321 {
      margin: .9rem auto .4rem;
    }
    .friendUl_0313 {
      padding: 0 .15rem;
      background: white;
    }
    .friendTitle_0313 {
      width: 100%;
      height: .32rem;
      padding-left: .15rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-size: .12rem;
      color: #818181; 
    }
  }
}
  
</style>
